import React,{useState} from 'react'

interface PopupProps {
    imageSrc: string; 
    popupSrc?: string;
    label1: string;
    label2?: string;
}

const PopupImage = ({ imageSrc, popupSrc, label1, label2 }:PopupProps) => {
    const [isVisible, setIsVisible] = useState(false);

    return (
        <div
            style={{ borderTop: '1px solid #f3efef', position: 'relative' }}
            onMouseEnter={() => setIsVisible(true)}
            onMouseLeave={() => setIsVisible(false)}
        >
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <img src={imageSrc} alt="icon" />
                <p>{label1}</p>
                <p>{label2}</p>
            </div>
            {isVisible && (
                <div className="popup">
                    <img src={popupSrc} style={{ width: '100%', height: '100%' }} alt="popup" />
                </div>
            )}
        </div>
    );
};

export default PopupImage
